<template>
	<view class="award-winners-container">
		<view class="activity-name">活动名称：<text class="value">{{activeName}}</text></view>
		<view class="classify-box flexWrapNo">
			<view class="classify-item">
				<view class="value">{{statInfo.couponNum||0}}</view>
				<view class="label">优惠券</view>
			</view>
			<view class="classify-item">
				<view class="value">{{statInfo.carMoneyNum||0}}</view>
				<view class="label">门店卡余额</view>
			</view>
			<view class="classify-item">
				<view class="value">{{statInfo.othersNum||0}}</view>
				<view class="label">其他</view>
			</view>
		</view>
		
		<view class="search-box">
			<view class="screen-box flexWrapNo">
				<view class="select-type flexWrapNo" @tap="toggleType()">
					{{currentType}}
					<image src="../../static/index/up-icon.png" class="wrap-icon" v-if="typeFlag"></image>
					<image src="../../static/index/down-icon.png" class="wrap-icon" v-else></image>
				</view>
				<view class="search-input flexWrapNo">
					<input placeholder="请输入手机号码" maxlength="11" placeholder-class="placeholderClass" v-model="mobile"/>
				</view>
				<view class="search-btn flexWrapNo" @tap="freshList">查询</view>
			</view>
			<view class="type-box flexWrapNo" v-if="typeFlag">
				<view class="type-item" v-for="(item,index) in typeList" :key="index" :class="{active:typeIndex==index}" @tap="changeType(index)">
					{{item.label}}
				</view>
			</view>
		</view>
		
		<!-- 列表数据 -->
		<view class="table-list">
			<view class="table-item table-head">
				<view class="mobile">手机号码</view>
				<view class="prize">奖品</view>
				<view class="time">开奖时间</view>
			</view>
			<view class="table-item" v-for="(item,index) in list" :key="index">
				<view class="mobile">{{item.userMobile}}</view>
				<view class="prize">{{item.awardName}}</view>
				<view class="time">{{item.awardTime}}</view>
			</view>
		</view>
		<uni-load-more v-if="showLoadStatus" :status="status" :size="14" :content-text="contentText" />
		<view class="quesheng" v-if="showEmpty">
			<image src="https://static.mo-yu.vip/wechat/images/orderEmpty.png"></image>
		</view>
	</view>
</template>

<script>
	// 防抖函数
	function debounce(fn, wait) {
	    let timeout = null;
	    return function() {
	        let context = this;
	        let args = arguments;
	        if (timeout) clearTimeout(timeout);
	        let callNow = !timeout;
	        timeout = setTimeout(() => {
	            timeout = null;
	        }, wait);
	        if (callNow) fn.apply(context, args);
	    };
	}
	export default{
		data(){
			return{
				activeName:'',
				benefitId:'',
				
				typeFlag:false,
				typeList:[
					{label:'全部类型',value:0},
					{label:'优惠券',value:1},
					{label:'门店卡余额',value:2},
					{label:'其他',value:3},
				],
				typeIndex:0,
				currentType:'全部类型',
				mobile:'',
				statInfo:{},  // 中奖统计数据
				list:[],
				page: 1,
				size: 10,
				showEmpty: true,
				showLoadStatus: false,
				more: true,
				contentText: {
					contentdown: '上拉加载更多~',
					contentrefresh: '加载中...',
					contentnomore: '已经到底了~~'
				},
				status: 'loading',
			}
		},
		onLoad(options) {
			this.activeName=options.activeName
			this.benefitId=options.benefitId
			this.getWinnerStat()
			this.freshList()
		},
		onReachBottom() {
			if (this.more) {
				this.getList()
			}
		},
		methods:{
			toggleType(){
				this.typeFlag=!this.typeFlag
			},
			
			changeType(index){
				this.typeIndex=index
				this.currentType=this.typeList[this.typeIndex].label
				this.toggleType()
				this.freshList()
			},
			
			// 获取中奖统计数据
			getWinnerStat(){
				this.$request.post(this.$api.winnerStat, {
					benefitId:this.benefitId,
				}, {
					isJava: true
				}).then(res => {
					if(res.code==200){
						let {
							data = {}
						} = res;
						this.statInfo=data||{}
					}
				})
			},
			
			freshList:debounce(function(){
				this.page = 1
				this.more = true
				this.status = 'loading'
				this.list = []
				this.getList();
			},600),
			
			// 获取中奖名单列表
			getList(){
				let awardType=''
				if(this.typeIndex!=0){
					awardType=this.typeList[this.typeIndex].value
				}
				this.$request.post(this.$api.winnerList, {
					benefitId:this.benefitId,
					awardType:awardType,
					userMobile:this.mobile,
					pageNum:this.page++,  //当前页数
					pageSize:this.size,  //当前条数
				}, {
					isJava: true
				}).then(res => {
					if(res.code==200){
						let {
							data = {}
						} = res;
						let newArray = data.list
						if (newArray.length == 0 && this.page == 2) {
							this.showEmpty = true
							this.showLoadStatus = false
							this.more = false // 不能再次请求了
							return false;
						} else {
							this.showLoadStatus = true
							this.more = true
							this.showEmpty = false
							this.status = 'loading'
						}
						if (newArray.length < this.size) { // 说明没有更多数据
							this.status = 'noMore'
							this.more = false
							this.showEmpty = false
						}
						this.list = this.list.concat(newArray);
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.award-winners-container{
		padding: 32rpx;
	}
	.activity-name{
		color: rgba(255, 255, 255, 0.6);
		font-size: 34rpx;
		text{
			color: #fff;
		}
	}
	.classify-box{
		margin-top: 30rpx;
		gap: 30rpx;
		justify-content: space-between;
		.classify-item{
			width: 200rpx;
			height: 120rpx;
			border: 2rpx solid rgba(255, 255, 255, 0.6);
			border-radius: 8rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			>view{
				color: #fff;
				font-size: 30rpx;
			}
		}
	}
	
	.search-box{
		margin-top: 30rpx;
		position: sticky;
		top: 0;
		z-index: 999;
		background-color: #040336;
		.screen-box{
			padding-bottom: 20rpx;
			.select-type{
				font-size: 28rpx;
				color: #FFFFFF;
				min-width: 160rpx;
				padding: 0 10rpx;
				height: 60rpx;
				border-radius:8rpx;
				justify-content: center;
				.wrap-icon{
					width: 34rpx;
					height: 34rpx;
					margin-left: 16rpx;
				}
			}
			/deep/.search-input{
				flex:1;
				height:60rpx;
				border-radius:8rpx;
				border: 2rpx solid rgba(255,255,255,0.5);
				margin: 0 20rpx;
				padding: 0 20rpx;
				input{
					font-size: 28rpx;
					color: #FFF;
					width: 100%;
				}
				.placeholderClass{
					font-size: 28rpx;
					color: rgba(255,255,255,0.5);
				}
			}
			.search-btn{
				padding: 0 30rpx;
				height: 60rpx;
				border-radius: 8rpx;
				color: #fff;
				font-size: 28rpx;
				background: rgb(31, 124, 247);
			}
		}
		
		.type-box{
			flex-wrap: wrap;
			z-index: 999;
			padding: 10rpx 0; 
			gap: 50rpx 20rpx;
			.type-item{
				font-size: 28rpx;
				color: #FFFFFF;
				min-width: 130rpx;
				height: 64rpx;
				line-height: 64rpx;
				text-align: center;
				background: #1D1C5C;
				border-radius: 63rpx 63rpx 63rpx 63rpx;
				box-sizing: border-box;
				padding: 0 26rpx;
			}
			.active{
				background: #26BCFD;
			}
		}
	}
	
	.table-list{
		margin-top: 10rpx;
		background: #1D1C5C;
		border-radius: 8rpx;
		.table-item{
			display: flex;
			color: #fff;
			font-size: 26rpx;
			text-align: center;
			border-bottom:1rpx solid  rgba(255,255,255,0.3);
			&:last-child{
				border-bottom: unset;
			}
			>view{
				padding: 16rpx 10rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.mobile{
				width: 200rpx;
				border-right:2rpx solid  rgba(255,255,255,0.3);
			}
			.prize{
				flex: 1;
				border-right:2rpx solid  rgba(255,255,255,0.3);
			}
			.time{
				width: 200rpx;
			}
		}
		.table-head{
			>view{
				font-weight: bold;
				font-size: 28rpx !important;
				// color: #26BCFD;
				padding: 25rpx 10rpx;
			}
		}
	}
	.quesheng{
		margin-top: 30rpx;
		display: flex;
		justify-content: center;
		image{
			width: 476upx;
			height: 280upx;
		}
	}
</style>